import { FC, useState, useEffect } from 'react';
import classnames from 'classnames';
import styles from './Editor.module.less';
import { Editor } from 'slate';
import { PLUGINS_KEYS } from '@/plugins/types';
import { useSlate } from 'slate-react';
import { colorBlocks } from './config';
import { Divider } from 'antd';

interface IProps {
  toobarDom: HTMLDivElement | null;
  type: 'color' | 'backgroundColor';
}

const ColorPicker: FC<IProps> = ({ toobarDom, type }) => {
  const editor = useSlate();

  useEffect(() => {
    function documentClick() {
      setColorPicker((origin) => ({
        ...origin,
        show: false,
      }));
    }
    document.addEventListener('click', documentClick);
    return () => {
      document.removeEventListener('click', documentClick);
    };
  }, []);

  const [colorPicker, setColorPicker] = useState({
    show: false,
    color: 'rgb(73, 73, 73)',
  });
  const setTextColor = (color: string = colorPicker.color) => {
    setColorPicker((origin) => ({
      ...origin,
      color,
    }));
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const marks: Record<string, any> = Editor.marks(editor) || {};

    Editor.addMark(editor, PLUGINS_KEYS.STYLEBASE, {
      ...(marks[PLUGINS_KEYS.STYLEBASE] || {}),
      [type]: color,
    });
  };
  return (
    <li className={classnames(styles['toobar-item'])}>
      <span onClick={() => setTextColor()} className={`${styles['color-apply']} ${styles['toobar-item-hover-span']}`}>
        {type === 'color' ? (
          <svg id="1983317.5-45676093055" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 25" width="27" height="25">
            <path
              d="M8.445 6.492l-1.633-4.86-1.736 4.86h3.369zM6.05 0h1.648l3.904 11h-1.597L8.914 7.705H4.659L3.494 11H2L6.05 0z"
              transform="translate(7 7)"
            ></path>
            <path d="M0 13h14v3H0z" transform="translate(7 7)" fill={colorPicker.color}></path>
            <path fill="none" stroke="#333" strokeOpacity=".15" d="M.5 13.5h13v2H.5z" transform="translate(7 7)"></path>
          </svg>
        ) : (
          <svg id="2469865.600000024-13928669216" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 25" width="27" height="25">
            <path fill={colorPicker.color} d="M0 13h14v3H0z" transform="translate(7 7)"></path>
            <path fill="none" stroke="#333" strokeOpacity=".15" d="M.5 13.5h13v2H.5z" transform="translate(7 7)"></path>
            <path d="M11.817 5.976l-1.971 5.135 1.113.427-.823 2.145 1.189.456L9.842 18h4.357l.922-2.401 1.19.457.824-2.146 1.112.427 1.972-5.135-8.402-3.226zm1.558 10.825h-1.787l.856-2.23 1.557.598-.626 1.632zm2.247-2.296l-1.488-.571-2.381-.914v.001l-.068-.026.394-1.025 3.936 1.511-.393 1.024zm1.936-1.72l-6.161-2.366 1.11-2.892 6.161 2.365-1.11 2.893z"></path>
          </svg>
        )}
      </span>
      <span
        className={`${styles['arrow-icon']} ${styles['toobar-item-hover-span']}`}
        onClick={(event) => {
          event.stopPropagation();
          setColorPicker((origin) => ({
            ...origin,
            show: true,
          }));
        }}
      ></span>
      {colorPicker.show && (
        <div
          className={styles['color-picker-container']}
          style={{
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            '--top': toobarDom?.clientHeight + 'px',
          }}
        >
          <div className={styles['color-picker-palette']}>
            <div className={styles['color-blocks-wrap']}>
              {colorBlocks.map((item, key) => {
                return (
                  <div
                    title={item.label}
                    className={classnames(styles['color-block'], {
                      [styles['color-block-active']]: colorPicker.color === item.value,
                    })}
                    key={key}
                    style={{ backgroundColor: item.value }}
                    onClick={() => setTextColor(item.value)}
                  ></div>
                );
              })}
            </div>
          </div>
          <Divider style={{ marginTop: 8, marginBottom: 4 }} />
          <div className={styles['more-color-wrap']}>
            <div className={styles['panel-icon']}></div>
            <div className={styles['more-text']}>更多颜色(待上线 )</div>
            <div className={styles['flex-1']}></div>
            <div className={styles['dropdown-icon']}></div>
          </div>
        </div>
      )}
    </li>
  );
};

export default ColorPicker;
